<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg {
      background-color: azure;
    }

    body {
      display: grid;
      grid-template-columns: repeat(auto-fill, 302px);
      grid-gap: 15px;
    }
    div {
      border: 1px solid #e1e1e1;
    }
    h3 {
      padding-left: 20px;
    }
  </style>
</head>

<body>
  <div>
    <h3>line标签</h3>
    <svg width="300" height="180">
      <line x1="0" y1="0" x2="200" y2="0" style="stroke: rgb(0, 0, 0); stroke-width: 5"></line>
    </svg>
  </div>
  <div>
    <h3>polyline标签</h3>
    <svg width="300" height="180">
      <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
      <polyline points="20,70 40,50 60,70" fill="black" stroke="black"></polyline>
      <polyline points="60,70 80,50 100,70" fill="black" stroke="black"></polyline>
      <polyline points="100,70 120,50 140,70" fill="black" stroke="black"></polyline>
    </svg>
  </div>
  <div>
    <h3>rect标签</h3>
    <svg width="300" height="180">
      <rect x="0" y="0" height="100" width="200" style="stroke: black; fill: silver"></rect>
    </svg>
  </div>
  <div>
    <h3>ellipse标签</h3>
    <svg width="300" height="180">
      <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver" />
    </svg>
  </div>
  <div>
    <h3>polygon标签</h3>
    <svg width="300" height="180">
      <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
    </svg>
  </div>
  <div>
    <h3>path标签</h3>
    <svg width="300" height="180">
      <path d="
        M 18,3
        L 46,3
        L 46,40
        L 61,40
        L 32,68
        L 3,40
        L 18,40
        Z
      "></path>
      </svg>
  </div>
  <div>
    <h3>text标签</h3>
    <svg width="300" height="180">
      <text x="50" y="25">Hello World</text>
    </svg>
  </div>
  <div>
    <h3>user标签</h3>
    <svg width="300" height="180">
    <circle id="myCircle1" cx="5" cy="5" r="4"/>
  
    <use href="#myCircle1" x="10" y="0" fill="blue" />
    <use href="#myCircle1" x="20" y="0" fill="white" stroke="blue" />
  </svg>
  </div>
  <div>
    <h3>g标签</h3>
    <svg width="300" height="100">
      <g id="myCircle2">
        <text x="25" y="20">圆形</text>
        <circle cx="50" cy="50" r="20"/>
      </g>
    
      <use href="#myCircle2" x="100" y="0" fill="blue" />
      <use href="#myCircle2" x="200" y="0" fill="white" stroke="blue" />
    </svg>
  </div>
  <div>
    <h3>defs标签</h3>
    <svg width="300" height="100">
      <defs>
        <g id="myCircle3">
          <text x="25" y="20">圆形</text>
          <circle cx="50" cy="50" r="20"/>
        </g>
      </defs>
    
      <use href="#myCircle3" x="0" y="0" />
      <use href="#myCircle3" x="100" y="0" fill="blue" />
      <use href="#myCircle3" x="200" y="0" fill="white" stroke="blue" />
    </svg>
  </div>
  <div>
    <h3>pattern标签</h3>
    <svg width="300" height="200">
      <defs>
        <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
          <circle fill="#bee9e8" cx="50" cy="50" r="35" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
    </svg>
  </div>
  <div>
    <h3>image标签</h3>
    <svg width="300" height="200">
      <image xlink:href="./images/01.jpeg" width="50%" height="50%"/>
    </svg>
  </div>
  <div>
    <h3>animate标签</h3>
    <svg width="300px" height="500px">
      <rect x="0" y="0" width="100" height="100" fill="#feac5e">
        <animate attributeName="x" from="0" to="300" dur="2s" repeatCount="indefinite" />
      </rect>
    </svg>
  </div>
  <div>
    <h3>animateTransform标签</h3>
    <svg width="300px" height="500px">
      <rect x="150" y="150" width="50" height="50" fill="#4bc0c8">
        <animateTransform 
          attributeName="transform" 
          type="rotate" 
          begin="0s" 
          dur="10s" 
          from="0 150 150" 
          to="360 150 150" 
          repeatCount="indefinite"/>
      </rect>
    </svg>
  </div>
</body>

</html>